<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}" >
    <link rel="stylesheet" href="css/fileinput.min.css">
</head>
<body>


    <div class="form-group">
        <label for="uploadImage" class="control-label">商品图片</label>
        <input class="file form-control" type="file" name="uploadImage" id="uploadImage"/>
    </div>



<script type="text/javascript">
    var imgURL;//用于传输图片的地址
    $("#uploadImage").fileinput({


        uploadUrl:"http://localhost:8080/uploadossfile", //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png','jpeg'],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: false, //默认异步上传
        showUpload:true, //是否显示上传按钮
        showRemove :false, //显示移除按钮
        showPreview :true, //是否显示预览
        showCaption:false,//是否显示标题
        browseClass:"btn btn-primary", //按钮样式
        dropZoneEnabled: false,//是否显示拖拽区域
        minImageWidth: 50, //图片的最小宽度
        minImageHeight: 50,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount:5, //表示允许同时上传的最大文件个数
        enctype:'multipart/form-data',
        validateInitialCount:true,
        previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        fileActionSettings:{
            showRemove: true, //移除
            showUpload: false, //上传
            showZoom: true, //放大
            showDrag: true,
        },
        uploadExtraData:{}, //额外参数设置
    }).on('filebatchuploadsuccess', function(event, data, previewId, index) {
        if (data.response.code != 200){
            layer.alert(data.response.msg)
            return false;
        }
        $("#attach_id").val(data.response.data); //赋值已上传的文件ID到隐藏input中
    })
 </script>


<script type="text/javascript" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.js}"></script>
<script type="text/javascript" src="js/fileinput.min.js"></script>
</body>
</html>